<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">radio</view>
			<view class="tui-page__desc">布局演示</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-list-view">
				<view class="tui-section__title">
					<text>常用布局一</text>
				</view>
				<radio-group @change="radioChange">
					<tui-list-cell padding="0" v-for="(item,index) in items" :key="index">
						<label class="thorui-radio thorui-align__center thorui-padding">
							<radio color="#5677fc" :value="item.value"></radio>
							<text class="thorui-left__sm">{{item.name}}</text>
						</label>
					</tui-list-cell>
				</radio-group>
				<view class="tui-section__title">
					<text>常用布局二</text>
				</view>
				<radio-group @change="radioChange">
					<tui-list-cell padding="0" v-for="(item,index) in items" :key="index">
						<label class="thorui-checkmark thorui-green thorui-flex__between thorui-padding">
							<text class="thorui-left__sm">{{item.name}}</text>
							<radio :value="item.value" :checked="item.checked || false"></radio>
						</label>
					</tui-list-cell>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: 'CHN',
						name: '中国',
						checked:true
					}, {
						value: 'USA',
						name: '美国'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
			}
		},
		methods: {
			radioChange(e) {
               console.log('change事件，携带value值为：', e.detail.value)
			}
		}
	}
</script>

<style>
	.tui-section__title {
		padding: 20rpx 15px;
	}

	.tui-page__spacing .thorui-radio {
		margin-right: 30rpx;
	}

	.tui-list-view {
		margin-top: 30rpx;
	}

	.tui-list-view .thorui-radio {
		width: 100%;
		height: 100%;
	}
</style>
